<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D效果</title>
		<style type="text/css">
			/* 
			3D效果
			 1，3D效果 -->transform的转换属性
			 
			   3D位移 translateZ()/translate3d()函数的使用  Z:以方框中心为原点，正数变大，负数变小
			   
			   3D旋转 rotateX()/rotateY()/rotateZ()  Z:以方框中心为原点，正数顺时针旋转，负数逆时针旋转
			   
			   3D缩放 scaleX()/scaleY()/scaleZ()/scale3d()
			   
			   transform-origin:left top;-->允许你改变被转换元素的位置
			   
			   transform-style:flat(默认，子元素将不保留其3D位置)/preserve-3d(子元素保留其3D位置)  -->规定被嵌套元素如何在3D空间中显示 （开启3D模式的一个属性）
			   
			   prespective    -->规定3D元素的透视效果 (视点值)
			   
			   presrective-origin  -->规定3D元素底部位置（视点位置）
			   
			   backface-visibility:visible（默认可见）/hidden;（不可见）  -->规定元素在不面对屏幕时是否可见
			 
			 2，CSS动画
			 
			 
			 */
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:1100px;
				height:400px;
				margin:200px auto;
				background-color:darkgray;
			}
			p{
				width:300px;
				height:300px;
				margin:30px;
				border:2px solid red;
				float:left;
				text-align:center;
				line-height:300px;
				font-size:2em;
				transform-style:preserve-3d;
				perspective: 1200px; 
			}
			span{
				display:block;
				width:300px;
				height:300px;
				background-color:rgba(255,0,0,.5);
				transition:all 1.5s;
			}
			p:nth-child(1) span:hover{
				transform:rotateX(45deg);
			}
			p:nth-child(2) span:hover{
				transform:rotateY(45deg);
			}
			p:nth-child(3) span:hover{
				transform:rotateZ(45deg);
			}
		</style>
		<script type="text/javascript"></script>
	</head>
	<body>
		<div class="box">
			<p><span>X轴旋转</span></p>
			<p><span>Y轴旋转</span></p>
			<p><span>Z轴旋转</span></p>
		</div>
	</body>
</html>
